<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>维修申请</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }

        .repair-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            width: 100%;
            max-width: 500px;
            box-sizing: border-box;
            transition: all 0.3s ease-in-out;
        }

        .repair-card:hover {
            transform: translateY(-5px);
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 1.5rem;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        label {
            font-weight: 600;
            color: #555;
        }

        input[type="text"],
        textarea {
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1rem;
            resize: none;
            overflow-y: scroll;
            min-height: 20px;
            width: 100%;
            box-sizing: border-box;
            background-color: #f9f9f9;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        input:focus,
        textarea:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
            outline: none;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            flex-wrap: wrap; /* 允许按钮换行 */
        }

        button {
            padding: 0.6rem 1.2rem; /* 调整按钮内边距 */
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.95rem; /* 调整字体大小 */
            font-weight: 600;
            transition: all 0.2s ease-in-out;
            margin: 0.4rem 0; /* 添加间距 */
            width: 48%; /* 让按钮适应容器宽度 */
            box-sizing: border-box;
        }

        .submit-btn {
            background-color: #4CAF50;
            color: white;
        }

        .home-btn {
            background-color: #666;
            color: white;
        }

        button:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <jsp:include page="/page/model/navbar.jsp" />

    <main>
        <div class="repair-card">
            <h2>提交维修申请</h2>
            <c:if test="${not empty success}">
                <p style="color: red;text-align: center">${success}</p>
            </c:if>
            <form action="${pageContext.request.contextPath}/repair/request" method="post">
                <div>
                    <label for="buildingId">楼栋编号:</label>
                    <input type="text" id="buildingId" name="buildingId" required />
                </div>

                <div>
                    <label for="apartmentNo">公寓编号:</label>
                    <input type="text" id="apartmentNo" name="apartmentNo" required />
                </div>

                <div>
                    <label for="description">故障描述:</label>
                    <textarea id="description" name="description" required></textarea>
                </div>

                <div class="button-group">
                    <button type="submit" class="submit-btn">提交申请</button>
                    <button type="button" class="home-btn" onclick="window.location.href='${pageContext.request.contextPath}/page/tenant/index.jsp'">返回首页</button>
                </div>
            </form>
        </div>
    </main>

    <jsp:include page="/page/model/footer.jsp" />
</body>
</html>
